<template>
    <section style="padding: 0 4px;">
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-select v-model="form.sellerid" placeholder="开具发票的店铺" clearable size="small" style="width: 150px;">
                        <el-option v-for="(item, index) in shops" :key="index" :label="item.sellertitle" :value="item.sellerid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input size="small" v-model.trim="form.sourceid" placeholder="订单号, 多订单请用“逗号”隔开" style="width: 250px;" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input size="small" v-model.trim="form.buyername" placeholder="买家昵称" style="width: 150px;" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input size="small" v-model.trim="form.invoice_header" placeholder="抬头" style="width: 150px;" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input size="small" v-model.trim="form.invoicing_number" placeholder="税号" style="width: 150px;" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table ref="multipleTable" :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="small" border @selection-change="selectionChange">
                <el-table-column type="selection" width="55" fixed v-if="groups == 1"></el-table-column>
                <el-table-column width="55" align="center" fixed v-if="groups == 2">
                    <template slot-scope="{ row }">
                        <el-radio v-model="radioSelected" :label="row" @input="radioChange(row)">
                            <span style="visibility: hidden"></span>
                        </el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="多合一列表" align="center">
                    <template slot-scope="{ row }">
                        <el-table :data="row" style="width: 100%" border :max-height="300" size="mini">
                            <el-table-column label="订单号" align="center" prop="sourceid" width="170" fixed></el-table-column>
                            <el-table-column label="订单状态" align="center" prop="order_status" width="100"></el-table-column>
                            <el-table-column label="任务状态" align="center" prop="status" width="100">
                                <template slot-scope="{ row }">
                                    <el-tag v-if="row.status == 0" size="mini" type="info">待处理</el-tag>
                                    <el-tag v-if="row.status == 1" size="mini" type="success">已完成</el-tag>
                                    <el-tag v-if="row.status == 2" size="mini" type="warning">处理中</el-tag>
                                    <el-tag v-if="row.status == 3" size="mini" type="danger">暂停中</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="是否需开票" align="center" prop="is_status" width="100">
                                <template slot-scope="{ row }">
                                    <el-tag v-if="row.hongchong_status == 1" size="mini" type="info">无需开票</el-tag>
                                    <el-tag v-if="row.hongchong_status == 2" size="mini">需开票</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="后台发票状态" align="center" prop="invoicing_status" width="100">
                                <template slot-scope="{ row }">
                                    <el-tag v-if="row.invoicing_status == 0" size="mini" type="info">未开票</el-tag>
                                    <el-tag v-if="row.invoicing_status == 1" size="mini" type="success">已开票</el-tag>
                                    <el-popover trigger="hover" v-if="row.invoicing_status == 2" placement="top">
                                        <p>{{ row.err_msg }}</p>
                                        <el-tag slot="reference" size="mini" type="danger">开票失败</el-tag>
                                    </el-popover>
                                    <el-tag v-if="row.invoicing_status == 3" size="mini" type="warning">申请冲红</el-tag>
                                    <el-tag v-if="row.invoicing_status == 4" size="mini" type="success">冲红成功</el-tag>
                                    <el-tag v-if="row.invoicing_status == 5" size="mini" type="danger">冲红失败</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="发票类型" align="center" prop="invoice_headerid" width="100">
                                <template slot-scope="{ row }">
                                    {{ row.invoice_headerid == 900 ? "个人" : "公司" }}
                                </template>
                            </el-table-column>
                            <el-table-column label="开票信息" align="center">
                                <el-table-column label="抬头/税号" align="center" width="200">
                                    <template slot-scope="{ row }">
                                        {{ row.invoice_header || "--" }} /
                                        {{ row.invoicing_number || "--" }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="地址/电话" align="center" width="200">
                                    <template slot-scope="{ row }">
                                        {{ row.opening_bank_address || "--" }} /
                                        {{ row.opening_bank_tel || "--" }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="开户行/账号" align="center" width="200">
                                    <template slot-scope="{ row }">
                                        {{ row.opening_bank || "--" }} /
                                        {{ row.opening_bank_number || "--" }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="客服备注" align="center" prop="notes" width="100" show-overflow-tooltip></el-table-column>
                            </el-table-column>
                            <el-table-column label="电子邮箱" align="center" prop="email" width="160"></el-table-column>
                            <el-table-column label="店铺" align="center" prop="sellerid" width="140">
                                <template slot-scope="{ row }">
                                    {{ row.sellerid | filterShop(shops) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="买家昵称" align="center" prop="buyername" show-overflow-tooltip></el-table-column>
                            <el-table-column label="实付金额" align="center" prop="pay_amount"></el-table-column>
                            <el-table-column label="开票商品" align="center" width="900">
                                <template slot-scope="{ row }">
                                    <el-table border :data="row.order_detail" size="mini" :header-cell-style="{ background: '#F3F4F7', color: '#555' }">
                                        <el-table-column label="子订单号" align="center" width="160" prop="son_order_no"></el-table-column>
                                        <el-table-column label="商品标题" align="center" prop="product_name" show-overflow-tooltip></el-table-column>
                                        <el-table-column label="购买数量" align="center" prop="num" width="100"></el-table-column>
                                        <el-table-column label="子订单号实付金额" align="center" prop="pay_amount" width="120"></el-table-column>
                                        <el-table-column label="货品编号" align="center" prop="sku_code" width="120"></el-table-column>
                                    </el-table>
                                </template>
                            </el-table-column>
                            <el-table-column label="创建人" align="center" prop="adduserid" width="100"></el-table-column>
                            <el-table-column label="执行人" align="center" prop="douserid" width="100"></el-table-column>
                            <el-table-column label="创建时间" align="center" prop="addtime" width="150"></el-table-column>
                            <el-table-column label="修改时间" align="center" prop="updatetime" width="150"></el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>
    </section>
</template>

<script>
import {invoiceKpList} from "@/api/fd/invoice";

export default {
    name: "kpch",
    props:{
        groups:{
            type: Number,
            default: 1 //1开票 2冲红
        },
        shops:{
            type: Array,
            default: []
        }

    },
    data() {
        return {
            tableHeight: window.innerHeight - 250,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            form: {
                sellerid: "",
                sourceid: "",
                buyername: "",//买家昵称
                invoicing_number:"",//税号
                invoice_header:""//抬头
            },
            radioSelected: "",
            selectData: [],

        }
    },
    updated() {
        this.$nextTick(() => {
            this.$refs.multipleTable.doLayout();
        });
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    filters: {
        filterShop(val, shops) {
            let label = val;
            shops.forEach(item=>{
                if(item.sellerid == val){
                    label = item.sellertitle;
                }
            });
            return label;
        },
    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit,
                groups: this.groups,
                type: 1,
            };
            param = Object.assign(param, this.form);
            this.loading = true;
            invoiceKpList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        selectionChange(val){
            this.selectData = val;
            this.$emit("selectHander", val)
        },
        radioChange(val){
            this.selectData = val;
            this.$emit("selectHander", val)
        },
    },
    mounted() {
        this.searchBtn();
    }
}
</script>

<style scoped>

</style>
